<template>

  <div class="div_right_send_message" v-if="this.$store.state.chartStatus.nowSessions.length > 0">
    <!--    顶部插件：表情 截图等. -->
    <div class="div_right_send_msg_top">
      <div class="div_right_send_msg_top_image">
        <el-icon @mouseenter="changeImageEnter(1)" @mouseleave="changeImageLeave(1)"
                 :color="[ color.topImage ? '#2277fe' : '' ]" :size="28">
          <Picture/>

        </el-icon>
      </div>
      <div class="div_right_send_msg_top_jiandao">
        <el-icon @mouseenter="changeImageEnter(2)" @mouseleave="changeImageLeave(2)"
                 :color="[ color.topJiandao ? '#2277fe' : '' ]" :size="26">
          <Scissor/>
        </el-icon>
      </div>
    </div>
    <!--    要发送的具体消息.-->
    <div class="div_right_send_msg">
      <div class="div_right_send_msg_message">
        <textarea class="div_right_send_msg_message_textarea"
                  style="resize: none;width: 1028px; height: 145px;outline: none" v-model="message"
                  v-on:keyup.enter="sendMsg"> </textarea>
      </div>
    </div>
    <!--发送按钮. 虽然有回车键,但是还是需要有按钮的.-->
    <div>
      <div class="div_right_send_msg_button">
        <el-button @click="sendMsg" type="primary" plain>发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import {Picture} from '@element-plus/icons'
import {Scissor} from '@element-plus/icons'
// import {Notification} from "../../util/notification";

export default {
  name: "right_send_message",
  components: {Picture, Scissor},
  data() {
    return {
      color: {
        topImage: false,
        topJiandao: false
      },
      message: "",
    }
  },
  methods: {
    changeImageEnter(num) {
      switch (num) {
        case 1: {
          this.color.topImage = true
          return
        }
        case 2 : {
          this.color.topJiandao = true
          return
        }
        default : {
          return
        }
      }
    },
    changeImageLeave(num) {
      switch (num) {
        case 1 : {
          this.color.topImage = false
          return
        }
        case 2: {
          this.color.topJiandao = false
          return
        }
        default : {
          return
        }
      }
    },
    sendMsg() {

      // 手动点下按钮不会自动换行符,如果回车发送消息则会带上换行符.
      // if (this.$store.state.chartStatus.nowSessions[this.$store.state.chartStatus.nowChartNumber].array_message === null) {
      //   this.$store.state.chartStatus.nowSessions[this.$store.state.chartStatus.nowChartNumber].array_message = []
      // }
      // this.$store.state.chartStatus.nowSessions[this.$store.state.chartStatus.nowChartNumber].array_message.push({
      //   uid: this.$store.state.userInfo.id,
      //   msg: this.message,
      // })
      // 还应该将消息存储到后台去.
      // 手动将state中的message设置为当前的message,当发送到服务端之后在进行清楚.
      this.$store.state.nowMessage = this.message
      this.message = ""
      // 渲染的问题.
      setTimeout(() => {
        this.$parent.downCrollbar()
      }, 40)
    },
  },
  mounted() {
    this.$parent.downCrollbar()
  },
  updated() {
    this.$parent.downCrollbar()
  }
}
</script>

<style scoped>

.div_right_send_message{
  background-color: #f5f6f7;
  height: 240px;
}

.div_right_send_msg_top {
  /*border-bottom: 1px dashed pink;*/
  height: 40px;
  /*background-color: #f5f6f7;*/
}

/* top 样式.*/
.div_right_send_msg_top_image {
  display: inline-block;
  margin-top: 6px;
  margin-left: 8px;
}

.div_right_send_msg_top_jiandao {
  display: inline-block;
  margin-left: 8px;
}

.div_right_send_msg {
  /*border: 1px dashed palegreen;*/
  width: 100%;
}

.div_right_send_msg_button {
  /*border: 1px dashed peru;*/
  height: 36px;
  margin-left: 960px;
  margin-top: 7px;
}

.div_right_send_msg_message_textarea {
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 0px;
  font-size: 20px;
  font-weight: 500;
  /*border-bottom: 1px solid #bdc3c7;*/
  background-color: #f5f6f7;
}

.div_right_send_msg_message {
  height: 150px;
  width: 90%;
  margin-left: 10px;
}

.div_right_send_msg_message > textarea::-webkit-scrollbar {
  width: 6px;
  background-color: #cccccc;
}

/*textarea:focus{*/
/*  border: 1px solid red;*/
/*}*/

</style>